<template>
  <!-- 顶部内容, 书写在这里, 通过传送门(teleporter) 放在顶部内 -->
  <teleport to=".header">
    <SdyHeader title="购物车" right="more"/>
  </teleport>

  <!-- 购物车列表 -->
  <div v-if="cartList.length">
    <van-swipe-cell
      v-for="item in cartList"
      :key="item.cartid">
      <van-card
        :price="item.originprice.toFixed(2)"
        :title="item.proname"
        class="goods-card"
        :thumb="item.img1" />
      <p class="cart-item-count">
        <van-stepper v-model="item.num" integer />
      </p>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
  </div>

  <!-- 空购物车 -->
  <div v-else>
    <van-empty
      image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
      image-size="80"
      description="您的购物车内还没有内容">
      <van-button round type="primary" class="bottom-button">去购物</van-button>
    </van-empty>
  </div>
</template>

<script name="sdyCart" lang="ts" setup>
import SdyHeader from '../../components/header.vue'
import { ref, onMounted } from 'vue'
import { getCartList } from '../../model/carts'
import useUserStore from '../../store/user'

const $userStore = useUserStore()

// 准备一个变量, 保存购物车列表
const cartList = ref([])

const getCartListHandler = async () => {
  const userid = window.localStorage.getItem('user_id') || ''
  const res = await getCartList(userid)
  if ((res as any).code !== '200') return
  cartList.value = res.data
  console.log(res.data)
}

onMounted(() => {
  getCartListHandler()
})
</script>

<style scoped lang="scss">
.delete-button {
  height: 100%;
}

.cart-item-count {
  height: 30px;
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
}
</style>
